page{
	background-color: #F6F7F7;
}
.top{
	width: 100%;
	height: 100rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	color: #666666;
	.top-item{
		width: 25%;
		view{
			display: flex;
			justify-content: center;
			align-items: center;
			.down{
				margin-left: 10rpx;
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 12rpx 9rpx 0 9rpx;
				border-color: #cccccc transparent transparent transparent;
			}
			.right{
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 4px 0 4px 7px;
				border-color: transparent transparent transparent #cccccc;
			}
		}
	}
}

.verified-imgs{
		width: 96%;
		padding: 20rpx 2%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		.img-items{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin:10rpx 0;
			.img-items-box{
				width: 335rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				position: relative;
				image{
					width: 100%;
					height: 335rpx;
					border-radius: 10rpx 10rpx 0 0;
				}
				.verified-title{
					width: 92%;
					padding: 10rpx 4%;
					font-size: 32rpx;
					font-weight: 500;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
				.verified-cate{
					width: 92%;
					padding: 10rpx 4% 20rpx 4%;
					font-size: 24rpx;
					color: #999999;
					text{
						margin: 0 10rpx;
					}
				}
				.shiming{
					position: absolute;
					top: 3%;
					right: 3%;
					width: 32rpx;
					height: 32rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			
		}
	}
	
	.mask{
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.box{
			width: 500rpx;
			height: 100%;
			font-size: 28rpx;
			background-color: #FFFFFF;
			animation: openBox 0.5s ease;
			.gender{
				width:90%;
				padding: 0 5%;
				margin-top: 10rpx;
				.gender-title{
					width: 100%;
					font-size: 24rpx;
					padding: 20rpx 0;
				}
				.gender-box{
					width: 100%;
					padding: 20rpx 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.gender-item{
						text-align: center;
						width: 96rpx;
						height: 48rpx;
						line-height: 48rpx;
						border-radius: 24rpx;
						border: 1rpx solid #cccccc;
						margin: 0 20rpx 0 0;
						color: #cccccc;
						font-size: 24rpx;
					}
					.gender-activer{
						border: 1rpx solid #FE4392;
						color: #FE4392;
					}
				}
			}
			.age{
				width:90%;
				padding: 0 5%;
				margin-top: 10rpx;
				.age-title{
					width: 100%;
					font-size: 24rpx;
					padding: 20rpx 0;
				}
				.age-box{
					width: 100%;
					padding: 20rpx 0;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					align-items: center;
					.age-item{
						text-align: center;
						width: 96rpx;
						height: 48rpx;
						line-height: 48rpx;
						border-radius: 24rpx;
						border: 1rpx solid #cccccc;
						margin: 0 10rpx 20rpx 0;
						color: #cccccc;
						font-size: 24rpx;
					}
					.age-activer{
						border: 1rpx solid #FE4392;
						color: #FE4392;
					}
				}
			}
			.area{
				width:90%;
				padding: 0 5%;
				margin-top: 10rpx;
				.area-title{
					width: 100%;
					font-size: 24rpx;
					padding: 20rpx 0;
				}
				.area-box{
					width: 100%;
					padding: 20rpx 0;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					align-items: center;
					.area-item{
						text-align: center;
						width: 96rpx;
						height: 48rpx;
						line-height: 48rpx;
						border-radius: 24rpx;
						border: 1rpx solid #cccccc;
						margin: 0 10rpx 20rpx 0;
						color: #cccccc;
						font-size: 24rpx;
					}
					.area-activer{
						border: 1rpx solid #FE4392;
						color: #FE4392;
					}
				}
			}
			.income{
				width:90%;
				padding: 0 5%;
				margin-top: 10rpx;
				.income-title{
					width: 100%;
					font-size: 24rpx;
					padding: 20rpx 0;
				}
				.income-box{
					width: 100%;
					padding: 20rpx 0;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					align-items: center;
					.income-item{
						text-align: center;
						// width: 96rpx;
						padding: 0 20rpx;
						height: 48rpx;
						line-height: 48rpx;
						border-radius: 24rpx;
						border: 1rpx solid #cccccc;
						margin: 0 10rpx 20rpx 0;
						color: #cccccc;
						font-size: 24rpx;
						padding: 0 10rpx;
					}
					.income-activer{
						border: 1rpx solid $base-color;
						color: $base-color;
					}
				}
			}
			.btn{
				width:92%;
				padding: 0 4%;
				margin: 40rpx auto;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.reset{
					width: 218rpx;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					background: #DDDDDD;
					border-radius: 36px;
					color: #666666;
					font-size: 28rpx;
				}
				.btn-con{
					width: 218rpx;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					background-color: $base-color;
					border-radius: 36px;
					color: #FFFFFF;
					font-size: 28rpx;
				}
			}
		}
	}
	.maskActive{
		animation: open 1s ease;
	}
	.maskActiver{
		animation: out 0.5s ease;
	}
	
	@keyframes open{
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	@keyframes out{
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
	
	@keyframes openBox{
		from {
			transform: translateX(100rpx);
		}
		to {
			transform: translateX(0);
		}
	}
	
	//回到顶部
	.back{
		position: fixed;
		right: 3%;
		bottom: 8%;
		width: 100rpx;
		height: 100rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		animation: upshow 0.5s linear;
		image{
			width: 100%;
			height: 100%;
		}
	}
	@keyframes upshow{
		from{
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
	
// .uni-input-placeholder /deep/ .cus-placeholder {
//         font-size: 12px;
//         font-family: Arial;
//         letter-spacing: 5px;
//         color: red !important;
//         text-align: center; 
//     }
.cus-placeholder /deep/ .uni-input-placeholder {
        font-size: 12px;
        font-family: Arial;
        letter-spacing: 5px;
        color: #cccccc !important;
        text-align: center; 
    }